// 该文件用于实现首页骨架屏，骨架屏在数据加载时展示页面大致结构，提升用户体验
import 'package:flutter/material.dart';
// 引入屏幕适配库，方便根据不同屏幕尺寸调整 UI 大小
import 'package:flutter_screenutil/flutter_screenutil.dart';
// 引入可实现交错网格布局（如瀑布流）的库
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
// 引入用于创建闪烁动画效果的库，常用于骨架屏
import 'package:shimmer/shimmer.dart';

// 提取常量，方便统一管理和修改样式相关的值
// 定义骨架屏闪烁动画的基础颜色为灰色
const kBaseColor = Colors.grey;
// 定义骨架屏闪烁动画的高亮颜色为灰色
const kHighlightColor = Colors.grey;
// 定义 MasonryGridView 的内边距，上下左右分别设置不同的间距
const kPadding = EdgeInsets.only(top: 10, left: 5, right: 5, bottom: 0);
// 定义骨架屏子元素的外边距，四周均为 10
const kMargin = EdgeInsets.all(10);
// 定义骨架屏子元素的圆角半径为 10
final kBorderRadius = BorderRadius.circular(10);

// 定义一个无状态组件 CuShimmer，用于展示首页骨架屏
class CuShimmer extends StatelessWidget {
  // 构造函数，接收 key 参数，使用 super 关键字传递给父类 StatelessWidget
  const CuShimmer({super.key});

  @override
  Widget build(BuildContext context) {
    // 使用 Shimmer.fromColors 创建一个带有闪烁动画效果的组件
    return Shimmer.fromColors(
      // 闪烁动画的基础颜色，使用之前定义的 kBaseColor 并设置为 300 亮度
      baseColor: kBaseColor.shade300,
      // 闪烁动画的高亮颜色，使用之前定义的 kHighlightColor 并设置为 100 亮度
      highlightColor: kHighlightColor.shade100,
      // 是否启用闪烁动画，这里设置为 true 表示启用
      enabled: true,
      // 应用闪烁动画的子组件
      child: SingleChildScrollView(
        // 滚动视图的内边距设置为零
        padding: EdgeInsets.zero,
        // 滚动视图的子组件，使用 MasonryGridView 实现交错网格布局
        child: MasonryGridView.count(
          // 网格视图的内边距，使用之前定义的 kPadding
          padding: kPadding,
          // 网格视图的列数，这里设置为 2，表示每行显示两个子元素
          crossAxisCount: 2,
          // 网格视图的子元素数量，这里设置为 8
          itemCount: 8,
          // 用于构建每个子元素的回调函数，调用 buildSkeletonItem 方法构建单个骨架屏元素
          itemBuilder: (BuildContext context, int index) => buildSkeletonItem(),
          // 垂直方向上子元素之间的间距
          mainAxisSpacing: 10,
          // 水平方向上子元素之间的间距
          crossAxisSpacing: 10,
          // 滚动的物理效果，设置为禁止滚动
          physics: const NeverScrollableScrollPhysics(),
          // 是否根据子元素的大小来调整网格视图的大小，设置为 true 表示根据子元素大小调整
          shrinkWrap: true,
        ),
      ),
    );
  }

  // 构建单个骨架屏元素的方法
  Widget buildSkeletonItem() {
    return Container(
      // 骨架屏元素的高度，使用 ScreenUtil 的扩展方法 h 进行屏幕适配
      height: 220.h,
      // 骨架屏元素的宽度，使用 ScreenUtil 的扩展方法 w 进行屏幕适配
      width: 170.w,
      // 骨架屏元素的外边距设置为零
      margin: EdgeInsets.zero,
      // 骨架屏元素的子组件，使用 Card 组件包裹，提供卡片样式
      child: Card(
        // Card 组件的子组件，再次使用 Shimmer.fromColors 添加闪烁动画
        child: Shimmer.fromColors(
          // 闪烁动画的基础颜色设置为透明
          baseColor: Colors.transparent,
          // 闪烁动画的高亮颜色，使用之前定义的 kHighlightColor 并设置为 100 亮度
          highlightColor: kHighlightColor.shade100,
          // 应用闪烁动画的子组件，使用 Column 组件垂直排列子元素
          child: Column(
            children: [
              // 调用 buildSkeletonBox 方法构建第一个骨架屏盒子，设置高度和宽度
              buildSkeletonBox(height: 64.h, width: 164.w),
              // 两个骨架屏盒子之间的间距，使用 ScreenUtil 的扩展方法 h 进行屏幕适配
              SizedBox(height: 30.h),
              // 调用 buildSkeletonBox 方法构建第二个骨架屏盒子，设置高度和宽度
              buildSkeletonBox(height: 20.h, width: 120.w),
            ],
          ),
        ),
      ),
    );
  }

  // 构建骨架屏盒子的方法，接收高度和宽度作为必需参数
  Widget buildSkeletonBox({required double height, required double width}) {
    return Container(
      // 骨架屏盒子的高度
      height: height,
      // 骨架屏盒子的宽度
      width: width,
      // 骨架屏盒子的外边距，使用之前定义的 kMargin
      margin: kMargin,
      // 骨架屏盒子的装饰，设置圆角和背景颜色
      decoration: BoxDecoration(
        // 圆角半径，使用之前定义的 kBorderRadius
        borderRadius: kBorderRadius,
        // 背景颜色，使用之前定义的 kBaseColor
        color: kBaseColor,
      ),
    );
  }
}
